
const logins = document.querySelector('#login')//登陆按钮
const fs = document.querySelector('#fs')//发送按钮
const shuru = document.querySelector('#shuru')//输入框
const loginuser = document.querySelector('#loginUser')//登陆用户输入框
const ullists = document.querySelector('#wenben')//展示聊天室输入信息
const ullist = document.querySelector('#wenben2')//展示私聊页面信息
const userlist = document.querySelector('#loginuser1')
const content_right = document.querySelector('.content .content-right .login')

const username = document.querySelector('#username')//展示私聊用户名
const wenben3 = document.querySelector('#wenben3') //展示私聊信息

const goback = document.querySelector('#goback')

const right = document.querySelector('.content .content-right')

var numlist = []

var socket = io('http://localhost:4399')

const imgurls = ['./4.jpg','2.jpg','3.jpg']
 
logins.onclick =function login(){
	const socket = io('http://localhost:4399',{
		query:{
			nickname:loginuser.value
		}
	});
	//把登陆者的信息发送给服务端，来确认登陆
	if(loginuser.value){
		content_right.setAttribute('class','active')
		userlist.classList.remove('active')
	}
	
	
	fs.onclick = function(){//对私聊和公聊进行判断
		if(username.innerHTML === "私聊聊天室"){
			if(shuru.value){
				
				const msg = { //针对自己发送的消息进行填充
					msg:shuru.value,
					nickname:loginuser.value,
					imgurl:String(loginuser.value).length%3
				}
				userimgcontent(msg,ullists)
				
				socket.emit('connection', shuru.value)
				shuru.value = ''
			}
		}else{
			if(shuru.value){
				socket.emit('only', {
					user:username.innerHTML,
					msg:shuru.value
				})
				const siliao = {
					msg:shuru.value,
					nickname:loginuser.value,
					imgurl:String(loginuser.value).length%3
				}
				const wenbencatch = document.getElementById(`wenben${username.innerHTML}`)
				if(wenbencatch){
					userimgcontent(siliao,wenbencatch)
				}
				
				//自我添加信息时，也会实现滚动条滚动效果
				const a1 = document.querySelectorAll(`#wenben${username.innerHTML} li`)
				const c1 = a1.length*a1[0].offsetHeight
				console.log(c1)
				if(c1>300){
					ullist.scrollTop+= a1[0].offsetHeight
				}
				
				
				
				shuru.value = ''
			}
		}
		
	}
	
	socket.on('onlyyou',(msg)=>{ //返回私聊信息
			
			const users = numlist.find(item=>item.who == msg.who)
			if(!users){//如果查不到就添加进去
				
				numlist.push({
					who:msg.who,
					content:[{
						user:msg.user,
						msg:msg.msg
					}]
				})
				
				//根据用户生成对应的消息提示框，解决了所有私聊用户共享一个屏幕的bug
				const wenbenplay = document.createElement('ul')
				wenbenplay.setAttribute('id',`wenben${msg.who}`)
				wenbenplay.classList.add('active')
				ullist.appendChild(wenbenplay)
				
				
				
				//然后进行私聊提醒
				const si = document.createElement('li')
				si.innerHTML = msg.who
				const span = document.createElement('span')
				span.innerHTML = '有人私聊您哦'
				span.classList.add('tixing')
				si.appendChild(span)
				userlist.appendChild(si)
				
			}else{//查到了就不添加用户，只添加内容
				users.content.push({
					user:msg.user,
					msg:msg.msg
				})
				const sis = document.getElementById('loginuser1').childNodes
				sis.forEach(item=>{
					if(item.nodeType == '1'){//查找结点
						if(users.who == item.childNodes[0].nodeValue){//根据节点上的用户信息来查找对应的li里面的span元素进行添加class类型
							item.childNodes[1].classList.add('tixing')
							item.childNodes[1].classList.remove('active')
						}
						
					}
				})
				
			}
			
			const sis = document.getElementById('loginuser1').childNodes //获取右侧私聊列表的所有li标签
			sis.forEach(item=>{
				if(item.nodeType == '1'){
					item.onclick = function(){
						
						const str = this.childNodes[0].nodeValue
						
						const liss = document.querySelectorAll('#wenben2 ul')
						liss.forEach(items=>{//点击给每一个生成的私人聊天室进行隐藏，当点击以后才会出现
							items.classList.add('active')
							
							if(`wenben${str}` == items.getAttribute('id')){
								items.classList.remove('active')
							}
						})
						
						//点击私聊列表后展示私聊页面
						this.childNodes[1].classList.remove('tixing')
						this.childNodes[1].classList.add('active')
						ullist.classList.remove('active')
						ullists.classList.add('active')
						//展示私聊内容
						// const str = this.childNodes[0].nodeValue
						const that = numlist.find(item=>item.who == str)
						if(that){
							username.innerHTML = that.who
							that.content.forEach(item=>{
								let siliao = {
									msg:item.msg,
									nickname:that.who,
									imgurl:String(that.who).length%3
								}
								let show = document.getElementById(`wenben${that.who}`)
								show.classList.remove('active')
								userimgcontent(siliao,show)
							})
							
							// const a1 = document.querySelectorAll(`#wenben${that.who} li`)
							// const c1 = a1.length*a1[0].offsetHeight
							// console.log(c1)
							// if(c1>300){
							// 	console.log(123123)
							// 	ullist.scrollTop+= a1[0].offsetHeight
							// }
							
							
						}
						that.content = []//添加成功后删除当前内容，避免重复添加
					}
				}
			})
			
	})
	
	socket.on('siliao',(msg)=>{
		const li = document.createElement('li')
		const img = document.createElement('img')
		const num = String(msg.nickname).length%3
		img.src=imgurls[num]
		li.appendChild(img)
		const div = document.createElement('div')
		div.innerHTML = msg.nickname+':'
		li.appendChild(div)
		const span = document.createElement('span')
		span.innerText = msg.msg
		li.appendChild(span)
		ullists.appendChild(li)
		
		
		li.onclick = function(){ //点击用户头像就可以进行私聊！
			//点击用户头像私聊时，就生成对应的私聊空间ul,防止生成的消息展示不出来
			const wenbenplay = document.createElement('ul')
			wenbenplay.setAttribute('id',`wenben${msg.nickname}`)
			ullist.appendChild(wenbenplay)
			
			const uls = document.querySelectorAll('#wenben2 ul')
			uls.forEach(item=>{
				item.classList.add('active')
				if(`wenben${msg.nickname}` == item.getAttribute('id')){
					item.classList.remove('active')
				}
			})
			
			const si = document.createElement('li')
			si.innerHTML = msg.nickname
			
			const span = document.createElement('span')
			ullist.classList.remove('active')
			ullists.classList.add('active')
			username.innerHTML = msg.nickname
		}
	})
	
}

goback.onclick = function(){ //返回按钮事件
	ullist.classList.add('active')
	ullists.classList.remove('active')
}

function userimgcontent(msg,node){ //发送消息的模板
	const li = document.createElement('li')
	const img = document.createElement('img')
	img.src=imgurls[msg.imgurl]
	li.appendChild(img)
	const div = document.createElement('div')
	div.innerHTML = msg.nickname+':'
	li.appendChild(div)
	const span = document.createElement('span')
	span.innerText = msg.msg
	li.appendChild(span)
	node.appendChild(li)
	const a = document.querySelectorAll('#wenben li')//获取添加进公众聊天室的所有聊天记录的li标签
	const c = a[0].offsetHeight*a.length//统计聊天信息的个数加起来的高度
	if(c>ullists.clientHeight){//判断聊天记录的高度是否大于聊天室盒子的高度，如果大于就添加scrollTop的高度
		ullists.scrollTop+= a[0].offsetHeight //进行滚动
	}
}




